<template>
	<view class="dynamic-list-item" :key="info.id">
		<view class="dynamic-list-item_upper">
			<image class="upper-icon" :src="`/static/icon-dynamic/icon_${info.publishState}.png`" mode="scaleToFill">
			</image>
			<text class="upper-text" v-text="info.publishTime">18时43分</text>
			<!-- 聊天室列出5个 -->
			<view class="upper-users" v-if="info.type == 'chat'">
				<sol-avatar class="upper-users_item" v-for="user in info.users" :key="user.uid" :src="user.avatar"
					size="sm"></sol-avatar>
			</view>
			<!-- 普通动态发布人 -->
			<sol-avatar v-if="info.type == 'dynamic' && !calcIsSelf" :src="info.user.avatar" size="sm" @click="$_click('user')">
			</sol-avatar>
			<image class="upper-more" src="/static/icon-default/icon_more_spot.png" mode="scaleToFill"
				@click="$_click('more')"></image>
		</view>
		<view class="dynamic-list-item_in">
			<text class="in-text" v-if="info.content" v-text="info.content" @click="$_click('content')">内容</text>

			<!-- S 图片 -->
			<view class="in-imags" v-if="calcImg.count != 0">
				<!-- 单张 -->
				<sol-image class="in-imags_one" width="484rpx" height="268rpx" v-if="calcImg.count == 1" :src="calcImg.data[0]"></sol-image>

				<!-- 2张 -->
				<template v-if="calcImg.count == 2">
					<sol-image class="in-imags_two-left" width="380rpx" height="268rpx" :src="calcImg.data[0]"></sol-image>
					<sol-image class="in-imags_two-right" width="234rpx" height="268rpx" :src="calcImg.data[1]"></sol-image>
				</template>

				<!-- 多张 -->
				<template v-if="calcImg.count >= 3">
					<sol-image class="in-imags_more-left" width="380rpx" height="268rpx" :src="calcImg.data[0]"></sol-image>
					<view class="in-imags_more-right">
						<sol-image class="in-imags_more-right_top" width="234rpx" height="123rpx" :src="calcImg.data[1]"></sol-image>
						<sol-image class="in-imags_more-right_bottom" width="234rpx" height="123rpx" :src="calcImg.data[2]"></sol-image>
					</view>
					<view class="in-imags_more-text">{{calcImg.count || 0}}图</view>
				</template>
			</view>
			<!-- E 图片 -->

			<view class="in-audio" v-if="info.audioTime != 0">
				<image class="in-audio_icon" src="/static/icon-dynamic/icon_audio-pay.png" mode="scaleToFill"></image>
				<text class="in-audio_text">{{info.audioTime || 0}}′′</text>
			</view>
		</view>
		<view class="dynamic-list-item_lower" v-if="info.type == 'dynamic'">
			<image class="lower-icon" :src="`/static/icon-dynamic/icon_${info.lifeState}.png`" mode="scaleToFill">
			</image>
			<text class="lower-text">{{info.lifeTime || '无限期'}}后消失</text>
			<text class="lower-text">· {{info.commentCount || 0}} 留言</text>
		</view>
	</view>
</template>

<script>
	/**  
	 * 动态列表项
	 * @property {Object} info 卡片信息  
	 * @event {Function} click 点击事件  
	 */
	export default {
		name: 'dynamic-list-item',

		props: {
			// 卡片信息
			info: {
				type: Object,
				default: () => {
					return {
						id: 1,
						user: {
							uid: 1,
							nickname: '凉凉',
							avatar: '/static/icon-default/icon_avatar.png',
						},
						imgs: ['/static/icon-default/icon_logo.png'],
						content: "多数事并不如你想的那样一帆风顺，但你却因此成为了可以乘风破浪的人。",
						publishTime: "18时32分", // 发布时间
						publishState: "weather-night", // 发布心情状态
						lifeTime: "16小时", // 展示时间
						lifeState: "time-1", // 展示生命灯状态
						commentCount: 13, // 留言数
						audioTime: 0, // 音频时长
						audioSrc: null, // 音频
						type: 'dynamic', // dynamic chat
						users: [], // chat时显示5个用户头像
					}
				}
			},
		},

		data() {
			return {};
		},

		computed: {
			// 计算图片
			calcImg() {
				let imgs = {
					count: this.info.imgs.length,
					data: this.info.imgs.map(item => item),
				}
				return imgs
			},
			// 计算是否自己发的
			calcIsSelf() {
				return this.info.user.uid == '10'
			}
		},

		methods: {
			$_click(type = '') {
				let data = {
					type,
					value: '',
				}
				switch (type) {
					case 'user':
						data.value = this.info.user.uid;
						break;
					case 'more':
					case 'content':
						data.value = this.info.id;
						break;
				}
				this.$emit('click', data)
			},
		}
	}
</script>

<style scoped lang="scss">
	.dynamic-list-item {
		background-color: #474e54;
		border-radius: 24rpx;
		padding: 28rpx;
		margin-bottom: 28rpx;

		// 顶部
		&_upper {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.upper {
				&-icon {
					width: 48rpx;
					height: 42rpx;
					display: block;
					overflow: hidden;
				}

				&-text {
					flex-grow: 1;
					padding-left: 28rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #878787;
				}

				&-users {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-start;

					&_item {
						margin-left: -18rpx;
						box-shadow: -8rpx 8rpx 16rpx #576069;
						z-index: 1;
						overflow: hidden;
						border-radius: 50%;
					}
				}

				&-more {
					padding-left: 28rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		// 中部
		&_in {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			.in {

				// 文字
				&-text {
					padding: 24rpx 0;
					font-size: 32rpx;
					font-weight: 400;
					color: #DDDDDD;
					letter-spacing: 4rpx;
				}

				// 图片
				&-imags {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-start;
					padding-bottom: 24rpx;
					position: relative;

					// 单张
					&_one {
						width: 484rpx;
						height: 268rpx;
						overflow: hidden;
						border-radius: 12rpx;
					}

					// 2张
					&_two-left {
						width: 380rpx;
						height: 268rpx;
						margin-right: 28rpx;
						overflow: hidden;
						border-radius: 12rpx;
					}

					&_two-right {
						width: 234rpx;
						height: 268rpx;
						overflow: hidden;
						border-radius: 12rpx;
					}

					// 多张
					&_more-left {
						width: 380rpx;
						height: 268rpx;
						margin-right: 28rpx;
						overflow: hidden;
						border-radius: 12rpx;
					}

					&_more-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
						height: 268rpx;

						&_top {
							width: 234rpx;
							height: 123rpx;
							overflow: hidden;
							border-radius: 12rpx;
						}

						&_bottom {
							width: 234rpx;
							height: 123rpx;
							overflow: hidden;
							border-radius: 12rpx;
						}
					}

					&_more-text {
						position: absolute;
						bottom: 42rpx;
						right: 22rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #DDDDDD;
						background-color: #474e54;
						padding: 7rpx 14rpx;
						border-radius: 12rpx;
						letter-spacing: 4rpx;
					}
				}

				// 音频
				&-audio {
					border-radius: 64rpx;
					height: 80rpx;
					width: 168rpx;
					background-color: #576069;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					padding: 0 32rpx;
					margin-bottom: 24rpx;

					&_icon {
						width: 48rpx;
						height: 48rpx;
					}

					&_text {
						font-size: 32rpx;
						font-weight: 400;
						color: #DDDDDD;
						margin-left: 18rpx;
					}
				}
			}
		}

		// 底部
		&_lower {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.lower {
				&-icon {
					width: 32rpx;
					height: 32rpx;
				}

				&-text {
					font-size: 24rpx;
					font-weight: 400;
					color: #878787;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
